<template>
  <div class="draw">
    <div class="content">
      <div class="content-tag">
        <div class="content-tag__message">
          <span class="content-tag__title">35kv母线</span>
          <span class="content-tag__summary">总发电功率：{{busSection}}kW</span>
        </div>
        <div class="line-details">
          <!--无数据时占位-->
          <div v-if="lineArr.length===0" class="details-item">
            <div class="type-1">断路器</div>
            <div class="item-1">
              <div class="item-name">实时电流</div>
              <div class="item-value">0A</div>
            </div>
            <div class="item-0">
              <div class="item-name">实时功率</div>
              <div class="item-value">0kW</div>
            </div>
            <div class="type-2">变流器</div>
            <div class="item-2" style="height: 30px;">
              <div class="item-name"></div>
              <div class="item-value"></div>
            </div>
            <div class="type-1">断路器</div>
            <div class="item-3">
              <div class="item-name">实时功率</div>
              <div class="item-value">0kW</div>
              <div class="item-name">实时电流</div>
              <div class="item-value">0A</div>
            </div>
            <div class="type-3">分区</div>
            <div class="item-4 item-name" style="text-align: center"></div>
          </div>
          <div v-for="(item,index) in lineArr" :key="index" class="details-item">
            <div class="item-1">
              <div class="item-name">实时电流</div>
              <div class="item-value">{{item.rtnac}}A</div>
            </div>
            <div v-if="index === 0" class="type-1">断路器</div>

            <div class="item-0">
              <div class="item-name">实时功率</div>
              <div class="item-value">{{item.rtPower}}kW</div>
            </div>
            <div v-if="index === 0" class="type-2">变流器</div>
            <div class="item-2" style="height: 30px;">
              <div class="item-name"></div>
              <div class="item-value"></div>
            </div>
            <div v-if="index === 0" class="type-1">断路器</div>
            <div class="item-3">
              <div class="item-name">实时功率</div>
              <div class="item-value">{{item.dcPower}}kW</div>
              <div class="item-name">实时电流</div>
              <div class="item-value">{{item.dcnac}}A</div>
            </div>
            <div v-if="index === 0" class="type-3">分区</div>
            <div class="item-4 item-name" style="text-align: center">{{item.name+item.type}}</div>
          </div>
        </div>
      </div>
      <!--<div class="footer-box">-->
      <!--<div class="left-box">-->
      <!--<div class="text-border">子系统</div>-->
      <!--</div>-->
      <!--<div class="center-box">-->
      <!--<div class="line-box">-->
      <!--<div class="icon icon-left"></div>-->
      <!--<div class="icon icon-right"></div>-->
      <!--</div>-->
      <!--<div class="line-body"></div>-->
      <!--<div class="text-border">预制舱式储能</div>-->
      <!--</div>-->
      <!--<div class="right-box">-->
      <!--<div class="icon"></div>-->
      <!--<div class="icon-body"></div>-->
      <!--<div class="text-border">绿色充换电站</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
import { StoreCell } from "@/api/scada";

export default {
  name: "draw",
  props: {
    busSection: Number | String
  },
  data() {
    return {
      lineArr: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    StoreCell().then(res => {
      console.log(res);
      this.lineArr = res;
    });
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
.draw {
  /*padding-left: 125px;*/
  padding-top: 80px;
}

.content {
  position: relative;
  .content-tag {
    border-top: 10px solid #369afe;
    width: 90%;
  }
  .content-tag__message {
    text-align: center;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .content-tag__title {
    color: #333333;
    font-size: 16px;
    margin-right: 35px;
    line-height: 32px;
  }
  .content-tag__summary {
    color: #999999;
    line-height: 32px;
  }

  .line-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;

    .details-item {
      width: 20%;
      background: url("../../../../assets/img/storePower/3.png") no-repeat top
        right / 50px 560px;
      > div {
        text-align: right;
        padding-right: 60px;
      }

      .item-name {
        color: #999;
      }
      .item-value {
        color: #369afe;
      }

      .item-0 {
        margin-top: 60px;
      }
      .item-1 {
        margin-top: 45px;
      }
      .item-2 {
        margin-top: 120px;
      }
      .item-3 {
        margin-top: 60px;
      }
      .item-4 {
        margin-top: 115px;
        transform: translateX(95px);
      }

      .type-1 {
        border: 1px solid #999;
        color: #999;
        width: 70px;
        text-align: center;
        padding: 5px 0;
        margin: 12px 90px 0 0;
        float: right;
      }
      .type-2 {
        border: 1px solid green;
        color: green;
        text-align: center;
        width: 70px;
        padding: 5px 0;
        margin: 20px 90px 0 0;
        float: right;
      }
      .type-3 {
        border: 1px solid orange;
        color: orange;
        text-align: center;
        width: 70px;
        padding: 5px 0;
        margin: 40px 90px 0 0;
        float: right;
      }
    }
  }

  .footer-box {
    width: 90%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    .text-border {
      border: 2px solid #dcdcdc;
      border-radius: 4px;
      padding: 5px 10px;
    }
    .icon {
      width: 0;
      border-bottom: 12px solid #999;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }
    .left-box {
      display: flex;
      width: 20%;
      justify-content: flex-end;
      flex-direction: column;
      align-items: flex-start;
    }
    .center-box {
      width: 60%;
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      align-items: center;
      .line-body {
        width: 2px;
        height: 40px;
        background: #999;
      }
      .line-box {
        width: 100%;
        height: 67px;
        border: 2px solid #bebebe;
        border-top: none;
        border-radius: 0 0 10px 10px;
        position: relative;
        .icon-left {
          position: absolute;
          top: -6px;
          left: -7px;
        }
        .icon-right {
          position: absolute;
          top: -6px;
          right: -7px;
        }
      }
    }

    .right-box {
      display: flex;
      width: 20%;
      justify-content: flex-end;
      flex-direction: column;
      align-items: center;
      transform: translateX(30%);
      .icon-body {
        width: 2px;
        height: 105px;
        background: #999;
      }
    }
  }
}
</style>
